<template>
	<article class="kp-coupon">
		<div class="couponlistc">
			<div class="kp-coupon-tab">
				<tab :scroll-threshold=4 custom-bar-width="50px" bar-active-color="rgb(255,68,72)" active-color='#000' :line-width="3">
					<tab-item selected @on-item-click="onItemClick(2)" class="tab_item">景区门票</tab-item>
					<tab-item @on-item-click="onItemClick(3)" class="tab_item">火车票</tab-item>
					<tab-item @on-item-click="onItemClick(4)" class="tab_item">汽车票</tab-item>
					<tab-item @on-item-click="onItemClick(5)" class="tab_item">飞机票</tab-item>
					<tab-item @on-item-click="onItemClick(1)" class="tab_item">酒店票</tab-item>
					<tab-item @on-item-click="onItemClick(6)" class="tab_item">电影票</tab-item>
				</tab>
			</div>
			<div class="kp-coupon-tabc">
				<div class="kp-couponBtn">
					<div class="notUsed" :class="chose==1?'active':''" @click="useTab(1)">未使用</div>
					<div class="used" :class="chose==2?'active':''" @click="useTab(2)">已使用</div>
					<div class="Expired" :class="chose==3?'active':''" @click="useTab(3)">已过期</div>
				</div>
			</div>
		</div>
		<div class="kp-coupon-content"  v-if="chose==1">
			<div class="kp-couponItem"  v-for="(item,index) in undata">
				<div class="kp-couponitemTop">
					<div class="kp-couponitemLeft">
						<p class="kp-couponitemPrice"><em>￥</em>{{item.couponMoney}}</p>
						<p class="kp-couponMan">{{item.couponLimitText}}</p>
					</div>
					<div class="kp-couponitemRight">
						<p class="kp-couponitemTitle">{{item.couponName}}</p>
						<p class="kp-couponitemDate">{{item.receiveStartdate}}-{{item.receiveEnddate}}</p>
						<p class="kp-couponsm" @click="rules(index)">详细说明<img src="../../../assets/shang@2x.png" v-if="item.isRule"/><img src="../../../assets/xia@2x.png" v-else/></p>
					</div>
				</div>
				<div class="getcoupon_con" v-show="item.isRule">
					<div class="getcoupon_text">
						<ol v-show="false">
						  <li>此优惠券适用于快票APP2.3.0及以上版本，可用于抵扣快票电影票；</li>
						  <li>优惠券仅限在快票移动端适用于快票APP2.3.0及以上版本，可用于抵扣快票电影票；</li>
						  <li>订单金额大于50元方可使用；</li>
						  <li>有效期内每张优惠券仅限使用一次，不能与其他优惠券同享；</li>
						  <li>同一类优惠券仅限使用一次；</li>
						  <li>优惠券自领用起30天内有效。</li>
						</ol>
						<div class="getcouponText" v-if="item.coupon_instructions">
							{{item.coupon_instructions}}
						</div>
						<div class="getcouponText" v-else>
							暂无规则
						</div>
						<!--<div class="coupon_daima">
							<p>优惠券代码</p>
							<p>LSLSAZLJALZN</p>
						</div>-->
					</div>
				</div>
				<div class="kp-couponitemBto" @click="coupon">立即使用<span v-if="item.useDay<3" class="span_coupon">(即将过期)</span></div>
				<div class="kp-couponIcon"><span>{{coupontitle}}</span></div>
			</div>
		</div>
		<div class="kp-coupon-content"  v-else-if="chose==2">
			<div class="kp-couponItem" v-for="(item,index) in endata">
				<div class="kp-couponitemTop">
					<div class="kp-couponitemLeft">
						<p class="kp-couponitemPrice gray"><em>￥</em>{{item.couponMoney}}</p>
						<p class="kp-couponMan">{{item.couponLimitText}}</p>
					</div>
					<div class="kp-couponitemRight">
						<p class="kp-couponitemTitle">{{item.couponName}}</p>
						<p class="kp-couponitemDate">{{item.receiveStartdate}}-{{item.receiveEnddate}}</p>
						<p class="kp-couponsm" @click="rules(index)">详细说明<img src="../../../assets/shang@2x.png" v-if="item.isRule"/><img src="../../../assets/xia@2x.png" v-else/></p>
					</div>
				</div>
				<div class="getcoupon_con" v-show="item.isRule">
					<div class="getcoupon_text">
						<div class="getcouponText" v-if="item.coupon_instructions">
							{{item.coupon_instructions}}
						</div>
						<div class="getcouponText" v-else>
							暂无规则
						</div>
					</div>
				</div>
				<div class="kp-couponitemBto kp-couponitemBtoGray">已使用</div>
				<div class="kp-couponIcon kp-couponIconGray"><span>{{coupontitle}}</span></div>
			</div>
		</div>
		<div class="kp-coupon-content"  v-else="chose==3">
			<div class="kp-couponItem" v-for="(item,index) in gqdata">
				<div class="kp-couponitemTop">
					<div class="kp-couponitemLeft">
						<p class="kp-couponitemPrice gray"><em>￥</em>{{item.couponMoney}}</p>
						<p class="kp-couponMan">{{item.couponLimit}}</p>
					</div>
					<div class="kp-couponitemRight">
						<p class="kp-couponitemTitle">{{item.couponName}}</p>
						<p class="kp-couponitemDate">{{item.receiveStartdate}}-{{item.receiveEnddate}}</p>
						<p class="kp-couponsm" @click="rules(index)">详细说明<img src="../../../assets/shang@2x.png" v-if="item.isRule"/><img src="../../../assets/xia@2x.png" v-else/></p>
					</div>
				</div>
				<div class="getcoupon_con" v-show="item.isRule">
					<div class="getcoupon_text">
						<div class="getcouponText" v-if="item.coupon_instructions">
							{{item.coupon_instructions}}
						</div>
						<div class="getcouponText" v-else>
							暂无规则
						</div>
					</div>
				</div>
				<div class="kp-couponitemBto kp-couponitemBtoGray">已过期</div>
				<div class="kp-couponIcon kp-couponIconGray"><span>{{coupontitle}}</span></div>
			</div>
		</div>
		<div v-if="showkong">
			<div class='resultNull'>
				<img src='../../../assets/nolist.png'></img>
			</div>
		</div>
	</article>
</template>

<script>
	import { Tab, TabItem } from 'vux';
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				pageHeight: '',
				userID: '',
				// 是否使用优惠券
				chose: 1,
				// 优惠券列表
				list: [],
				coupontype: 2,//那种优惠券
				coupontitle:'景区门票',//类型
				undata: [],
				endata: [],
				gqdata:[],
				showkong:true,
				baseUrl:'',
				pathurl:'',
			}
		},
		mounted() { //载入后执行
			this.getcouponlist();
      this.onItemClick(2)
		},
		created() { //创建后
		},
		watch: { //监听放置
		},
		methods: { //方法放置
			rules(index){

				let that = this;
				if(that.chose==1){
					let isRule = that.undata[index].isRule;// 先用一个变量接收一个原来的状态值
				    that.undata.forEach((item) => {  //循环已经把所有的状态值清空了
				        item.isRule = false;
				    })
				    that.undata[index].isRule = !isRule;
				}else if(that.chose==2){
					let isRule = that.endata[index].isRule;// 先用一个变量接收一个原来的状态值
				    that.endata.forEach((item) => {  //循环已经把所有的状态值清空了
				        item.isRule = false;
				    })
				    that.endata[index].isRule = !isRule;
				}else if(that.chose==3){
					let isRule = that.gqdata[index].isRule;// 先用一个变量接收一个原来的状态值
				    that.gqdata.forEach((item) => {  //循环已经把所有的状态值清空了
				        item.isRule = false;
				    })
				    that.gqdata[index].isRule = !isRule;
				}

			},
			onItemClick(coupontype) {
				this.coupontype = coupontype;
				if(coupontype==1){
					//酒店
					this.pathurl = '/index/hotel';
					this.coupontitle = '酒店票';
				}else if(coupontype==2){
					//景区
					this.pathurl = '/index/scenic';
					this.coupontitle = '景区门票';
				}else if(coupontype==3){
					//火车
					this.pathurl = '/index/train';
					this.coupontitle = '火车票';
				}else if(coupontype==4){
					//汽车
					this.pathurl = '/index/car/index';
					this.coupontitle = '汽车票';
				}else if(coupontype==5){
					//飞机
					this.pathurl = '/index/aircraft';
					this.coupontitle = '飞机票';
				}else{
					//电影
					this.pathurl = '/index/film';
					this.coupontitle = '电影票';
				}
				this.getcouponlist();
			},
			useTab(indexs){

				this.chose = indexs;
				this.getcouponlist();
			},
			getcouponlist(){
				this.$loading.show();
				let param={
					userID: this.userinfo.userID,
					status: this.chose,
					type: this.coupontype+''
				};
				let that = this;
				var header ={ 'Content-Type': 'application/x-www-form-urlencoded'};
				this.$http.get(this.$baseUrl.baseurl + 'coupon/app/coupon/appCouponList', param,header).then((res) => {
//					console.log(res);
					if(res.data.Code == 0){
						if(res.data.Result.myCouponList.length > 0){
							var list = res.data.Result.myCouponList;
							list && list.forEach((item)=>{
								item.isRule = false;
								if (item.couponLimit == 0) {
									item.couponLimit = '不限'
								} else {
									item.couponLimit = '满' + item.couponLimit + '元可用';
								}
								item.receiveStartdate = item.useStartdate.substring(0, 10).replace(/-/g, '.');

								item.receiveEnddate = item.useEnddate.substring(0, 10).replace(/-/g, '.');
							})

							if (that.chose==1){
								that.undata = list;
							} else if (that.chose == 2){
								that.endata = list;
							} else if (that.chose == 3) {
								that.gqdata = list;
							}
							that.showkong = false;
						}else{
							that.showkong = true;
							that.list = [];
							if (that.chose==1){
								that.undata = [];
							} else if (that.chose == 2){
								that.endata = [];
							} else if (that.chose == 3) {
								that.gqdata = [];
							}
						}
				        that.$loading.hide();
					}else{
						that.$toast(res.data.msg)
						that.$loading.hide();
					}
				}).catch((err) => {
					this.$loading.hide();
				})
			},
			coupon(){
				this.$router.push({
					path:this.pathurl,
				})
			}
		},
		components: {
			Tab,
			TabItem,
		},
		computed: mapGetters([
			'userinfo',
		]),
	}
</script>

<style scoped>
	/* /deep/深作用标识 */

	.kp-coupon {
		background: #f4f5f9;
		height: 100vh;
	}
	.couponlistc{
		position: fixed;
		top: 86px;
		z-index: 9;
	}
	.kp-coupon-tab {
		line-height: 86px;
		padding: 0;
		width: 750px;
		/*padding:0 20px;*/
		background: #fff;
	}

	.kp-coupon-tab /deep/ .vux-tab-wrap {
		height: 82px;
		padding: 0;
	}

	.kp-coupon-tab /deep/ .vux-tab-wrap .vux-tab-container,
	.kp-coupon-tab /deep/ .vux-tab-wrap .vux-tab-container .vux-tab {
		height: 82px;
	}

	.kp-coupon-tab /deep/ .vux-tab-wrap .vux-tab-container .vux-tab .vux-tab-item {
		height: 82px;
		line-height: 82px;
		font-size: 32px;
		background: none;
	}
	/* //优惠劵列表 */

	.kp-cc-li {
		margin: 0 14px;
		margin-bottom: 8px;
	}

	.kp-cc-li-bg {
		width: 720px;
		height: 150px;
		background: url(../../../assets/coupon-1.png) no-repeat center center;
		background-size: 720px 150px;
	}

	.kp-coupon-content {
		padding-top: 320px;
	}

	.kp-cc-li-bg {
		display: flex;
		position: relative;
	}

	.kp-clb:nth-child(1) {
		width: 216px;
	}

	.kp-clb:nth-child(1) span {
		display: block;
		padding-top: 35px;
		font-size: 50px;
		color: #fff;
		text-align: center;
	}

	.kp-clb:nth-child(1) p {
		display: block;
		padding-top: 15px;
		font-size: 24px;
		color: #fff;
		text-align: center;
	}

	.kp-clb:nth-child(2) {
		width: 504px;
	}

	.kp-clb:nth-child(2) h2 {
		padding-top: 34px;
		padding-left: 37px;
		font-size: 28px;
		font-weight: normal;
		color: rgb(68, 68, 68);
	}

	.kp-clb:nth-child(2) p {
		padding-top: 10px;
		padding-left: 37px;
		color: rgb(183, 183, 183);
		position: relative;
		font-size: 24px;
	}
	.kp-liji{
		padding-right: 20px;
	}
	.kp-clb:nth-child(2) p span {
		font-size: 28px;
		display: inline-block;
		/*position: absolute;*/
		color: rgb(234, 108, 111);
		/*right: 38px;
		top: 37px;*/
		background: url(../../../assets/right-4.png) no-repeat right center;
		background-size: 13px 25px;
		padding-right: 25px;
	}
	/* //已过期 */

	.kp-ygq-bg {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(204, 204, 204, 0.26) url(../../../assets/ygq.png) no-repeat right top;
		background-size: 91px 74px;
	}
	/* //已过期 */

	.kp-ysy-bg {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(204, 204, 204, 0.26) url(../../../assets/ysy.png) no-repeat right top;
		background-size: 91px 74px;
	}
	.resultNull {
		/* padding: 10px 0; */
		font-size: 24px;
		line-height: 70px;
		color: #a7a7a7;
		text-align: center;
		margin: 100px auto;
		width: 352px;
		height: 461px;
	}

	.resultNull>img {
		width: 100%;
		height: 100%;
	}
	.kp-coupon-tabc{
		width: 100%;
		background: #f4f5f9;
		padding: 36px 0;
		z-index: 100;
	}
	.kp-couponBtn{
		width: 684px;
		height: 68px;
		border: 2px solid rgb(255,93,93);
		border-radius: 10px;
		margin: 0px auto;
		display: flex;
	}
	.kp-couponBtn>div{
		flex: 1;
		color: rgb(255,93,93);
		font-size: 30px;
		line-height: 72px;
		text-align: center;
	}
	.kp-couponBtn>div.active{
		background: rgb(255,93,93);
		color: #fff;
	}
	.kp-couponItem{
		width: 688px;
		margin: 0 auto;
		position: relative;
		margin-bottom: 25px;
	}
	.kp-couponitemTop{
		width: 688px;
		height: 200px;
		background: url('../../../assets/quan@2x.png') no-repeat;
		background-size: 688px 203px;
		display: flex;
	}
	.kp-couponitemBto{
		width: 688px;
		height: 75.5px;
		background: url('../../../assets/lijishiyong@2x.png') no-repeat;
		background-size: 688px 75.5px;
		text-align: center;
		line-height: 75.5px;
		color: #fff;
		font-size: 32px;
	}
	.kp-couponitemBtoGray{
		width: 688px;
		height: 75.5px;
		background: url('../../../assets/yishiyong@2x.png') no-repeat;
		background-size: 688px 75.5px;
	}
	.kp-couponIcon{
		width: 167px;
		height: 62px;
		background: url('../../../assets/biaoqiankuang@2x.png') no-repeat;
		background-size: 167px 62px;
		color: #fff;
		font-size: 32px;
		line-height: 62px;
		position: absolute;
		left: 46px;
		top: -5px;
	}
	.kp-couponIcon>span{
		display: inline-block;
		width: 161px;
		height: 62px;
		text-align: center;
	}
	.kp-couponIconGray{
		width: 167px;
		height: 62px;
		background: url('../../../assets/biaoqiankuang_hui@2x.png') no-repeat;
		background-size: 167px 62px;
	}
	.kp-couponitemLeft{
		width: 34%;
		padding-left: 20px;
		text-align: center;
	}
	.kp-couponitemRight{
		flex: 1;
		letter-spacing: 0;
		margin-left: 10px;
	}
	.kp-couponitemPrice{
		margin-top: 60px;
		color: rgb(255,68,72);
		font-size: 73px;
		letter-spacing: 0;
		font-family: 'SourceHanSansCN-Regular';
	}
	.kp-couponitemPrice>em{
		font-size: 40px;
		/*margin-right: 6px;*/
		font-family: 'PingFang-SC-Medium';
	}
	.kp-couponitemPrice.gray{
		color: rgb(208,208,208);
	}
	.kp-couponMan{
		color: rgb(51,51,51);
		font-size: 30px;
		margin-top: 12px;
		font-family: 'PingFang-SC-Medium';
	}
	.kp-couponitemTitle{
		color: rgb(51,51,51);
		font-size: 34px;
		margin-top: 36px;
	}
	.kp-couponitemDate{
		font-size: 26px;
		color: rgb(140,140,140);
		letter-spacing: 2px;
		margin-top: 18px;
	}
	.kp-couponsm{
		color: rgb(140,140,140);
		font-size: 28px;
		margin-top: 28px;
	}
	.kp-couponsm>img{
		width: 20px;
		height: 12px;
		vertical-align: middle;
		margin-left: 14px;
	}
	.getcoupon_con{
		padding: 0px 10px;
		width: 100%;
		box-sizing: border-box;
	}
	.getcoupon_text{
		padding: 16px 44px 25px 20px;
		background: #fff;
	}
	.getcouponText{
		line-height: 1.5;
		color: rgb(153,153,153);
		font-size: 22px;
	}
	.getcoupon_text>ol{
		padding-left: 30px;
	}
	.getcoupon_text>ol>li{
		list-style: decimal;
		line-height: 1.5;
		color: rgb(153,153,153);
		font-size: 22px;
		font-style: 'PingFang-SC-Medium';
	}
	.coupon_daima{
		margin-top: 20px;
		font-size: 22px;
		color: rgb(153,153,153);
		line-height: 1.3;
	}
	.span_coupon{
		font-size: 24px;
	}
</style>
